<script setup lang="ts">
import type { EChartsOption } from 'echarts';

import { onMounted, onUnmounted, ref, watch } from 'vue';

import * as echarts from 'echarts';

interface ChartProps {
  chartData: {
    seriesData: number[];
    xData: string[];
  };
}

const props = defineProps<ChartProps>();
console.log(props);

const chartRef = ref<HTMLElement>();
let chart: echarts.ECharts | null = null;

const getOptions = (): EChartsOption => ({
  backgroundColor: 'transparent',
  grid: {
    top: '12%',
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true,
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow',
    },
    formatter(params: any) {
      // 只显示柱状图的数据
      const barData = (Array.isArray(params) ? params : [params]).find(
        (param) => param.seriesType === 'bar',
      );
      if (!barData) return '';

      return `${barData.axisValueLabel}<br/>${barData.value}`;
    },
  },
  xAxis: {
    type: 'category',
    data: props.chartData.xData,
    axisLine: {
      lineStyle: { color: '#8AB5E9' },
    },
    axisLabel: {
      color: '#fff',
    },
  },
  yAxis: {
    type: 'value',
    splitLine: {
      lineStyle: { color: 'rgba(138, 181, 233, 0.2)' },
    },
    axisLabel: {
      color: '#fff',
    },
  },
  series: [
    {
      type: 'bar',
      data: props.chartData.seriesData.map((value) => ({
        value,
      })),
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#83bff6' },
          { offset: 0.5, color: '#188df0' },
          { offset: 1, color: '#188df0' },
        ]),
      },
      barWidth: '30%',
    },
    {
      type: 'scatter',
      symbolSize: 25,
      symbol:
        'path://M512 68.94c-172.06 0-311.72 139.66-311.72 311.72 0 92.47 49.64 185 148.91 277.44C435.87 736.3 512 955.06 512 955.06s76.13-218.76 162.81-297c99.27-92.47 148.91-184.97 148.91-277.44C823.72 208.6 684.06 68.94 512 68.94z', // 使用地图标记点形状
      data: props.chartData.seriesData.map((value) => ({
        value, // 直接使用值，不需要索引
        symbolOffset: [0, -20], // 调整偏移量
        label: {
          show: true,
          position: 'inside',
          formatter: '{@value}', // 使用 @value 来显示实际值
          color: '#fff',
          fontSize: 12,
          fontWeight: 'bold',
          offset: [0, -2], // 调整文字位置
        },
      })),
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#89d3fb' }, // 顶部颜色
          { offset: 1, color: '#2196f3' }, // 底部颜色
        ]),
        shadowColor: 'rgba(33, 150, 243, 0.3)',
        shadowBlur: 10,
      },
    },
  ],
});

// 初始化图表
const initChart = () => {
  if (!chartRef.value) return;
  chart = echarts.init(chartRef.value);
  chart.setOption(getOptions());
};

// 监听数据变化
watch(
  () => props.chartData,
  () => {
    chart?.setOption(getOptions());
  },
  { deep: true },
);

// 监听窗口大小变化
const handleResize = () => {
  chart?.resize();
};

onMounted(() => {
  initChart();
  window.addEventListener('resize', handleResize);
});

onUnmounted(() => {
  window.removeEventListener('resize', handleResize);
  chart?.dispose();
});
</script>

<template>
  <div ref="chartRef" style="width: 100%; height: 270px"></div>
</template>
